<template>
  <div class="site-selection-wrapper">
    <div class="banner-box">
      <el-image class="banner" :src="banner" />
    </div>

    <div class="form-box">
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-form-item label="园区名称" prop="name">
          <el-input v-model="form.name" placeholder="请填写园区名称"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="form.contacts" placeholder="请填写联系人"></el-input>
        </el-form-item>
        <el-form-item label="所在城市" prop="belongDistrict">
          <el-cascader
            id="district"
            ref="district"
            v-model="form.belongDistrict"
            class="w-full"
            clearable
            filterable
            placeholder="选择区县"
            :options="areaTree"
            :props="{
              checkStrictly: true,
              multiple: false,
              value: 'code',
              label: 'name',
            }"
            @change="handleDistrict"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="园区级别" prop="level">
          <el-select v-model="form.level" class="w-full">
            <el-option
              v-for="item in parkLevelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="园区类型" prop="type">
          <el-select v-model="form.type" class="w-full">
            <el-option
              v-for="item in parkTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="form.phone" placeholder="请填写手机号码"></el-input>
        </el-form-item>

        <el-button class="commit-btn" type="primary">提交认证</el-button>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import banner from '@/assets/img/index/parkRegBanner.png'
import { ActionsType as TreeActionsType } from '@/actions/tree'
import {
  parkLevelOptions,
  parkTypeOptions,
} from '@/components/admin/manage/carrier/common/dictionary.ts'
export default Vue.extend({
  components: {},
  data() {
    return {
      banner,
      form: {
        name: '',
        contacts: '',
        belongDistrict: '',
        level: '',
        type: '',
        phone: '',
      },
      rules: {
        name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        belongDistrict: [{ required: true, message: '请选择意向城市', trigger: 'change' }],
        level: [{ required: true, message: '请选择园区级别', trigger: 'change' }],
        type: [{ required: true, message: '请选择园区类型', trigger: 'change' }],
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
      },

      parkLevelOptions,
      parkTypeOptions,
    }
  },
  head: {
    title: '帮我选址',
  },
  computed: {
    ...mapGetters('tree', {
      areaTree: 'area',
    }),
  },
  created() {
    this.$store.dispatch(TreeActionsType.getArea)
  },
  methods: {
    handleDistrict() {
      const nodes = this.$refs.district.getCheckedNodes()
      this.form.belongDistrictLabel = nodes.map((n) => n?.label)
      console.log(this.form)
    },
  },
})
</script>
<style lang="scss" scoped>
.site-selection-wrapper {
  background-color: #f7f7f7;
  .banner-box {
    padding: 20px 0;
    .banner {
      width: 1140px;
      height: 336px;
      display: block;
      margin: 0 auto;
    }
  }

  .form-box {
    margin: 0 auto;
    width: 1140px;
    background-color: #fff;
    padding: 30px 245px;
  }

  .commit-btn {
    padding: 15px 100px;
    font-size: 16px;
    font-weight: bold;
    margin: 50px auto;
    display: block;
  }
}
</style>
